<script lang="ts" setup>
  import { onMounted, onBeforeUnmount, watch, ref, reactive,defineEmits } from 'vue';
  import gmDrawer from '@/components/Drawer/index.vue'
  import {  getRecordUrl } from "@/api/site"
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import EZUIKit from 'ezuikit-js';
  import { useRoute } from 'vue-router';
import { setToken } from "@/utils/cache/cookies"
const searchData = reactive<any>({
  date: new Date().toISOString().slice(0, 10)
});
const searchFormRef = ref<FormInstance | null>(null);
const route = useRoute()
const id = route.query.id
const width = route.query.width || 400
const formRef = ref<FormInstance>()
const emit = defineEmits(['cancel', 'success'])
const UIKitDEMO = ref<any>(null)
const dateRef = ref(null)
var themeData = ref<any>({
      autoFocus: 0, // 设置为0，视频按钮条就不会消失
      poster:
        'https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png',
      "header": {
        "color": "#1890ff",
        "activeColor": "#FFFFFF",
        "backgroundColor": "#000000",
        "btnList": [
          {
            "iconId": "deviceID",
            "part": "left",
            "defaultActive": 0,
            "memo": "顶部设备序列号",
            "isrender": 1
          },
          {
            "iconId": "deviceName",
            "part": "left",
            "defaultActive": 0,
            "memo": "顶部设备名称",
            "isrender": 1
          },
          {
            "iconId": "cloudRec",
            "part": "right",
            "defaultActive": 0,
            "memo": "云存储",
            "isrender": 0
          },
          {
            "iconId": "rec",
            "part": "right",
            "defaultActive": 0,
            "memo": "SD卡回放",
            "isrender": 0
          }
        ]
      },
      "footer": {
        "color": "#FFFFFF",
        "activeColor": "#1890FF",
        "backgroundColor": "#00000021",
        "btnList": [
          {
            "iconId": "play",
            "part": "left",
            "defaultActive": 1,
            "memo": "播放",
            "isrender": 1
          },
          {
            "iconId": "capturePicture",
            "part": "left",
            "defaultActive": 0,
            "memo": "截屏按钮",
            "isrender": 1
          },
          {
            "iconId": "sound",
            "part": "left",
            "defaultActive": 0,
            "memo": "声音按钮",
            "isrender": 1
          },
          {
            "iconId": "pantile",
            "part": "left",
            "defaultActive": 0,
            "memo": "云台控制按钮",
            "isrender": 1
          },
          {
            "iconId": "recordvideo",
            "part": "left",
            "defaultActive": 0,
            "memo": "录制按钮",
            "isrender": 1
          },
          {
            "iconId": "talk",
            "part": "left",
            "defaultActive": 0,
            "memo": "对讲按钮",
            "isrender": 1
          },
          {
            "iconId": "zoom",
            "part": "left",
            "defaultActive": 0,
            "memo": "电子放大",
            "isrender": 1
          },
          {
            "iconId": "speed",
            "part": "right",
            "defaultActive": 1,
            "memo": "倍数",
            "isrender": 1
          },
          {
            "iconId": "hd",
            "part": "right",
            "defaultActive": 0,
            "memo": "清晰度切换按钮",
            "isrender": 1
          },
          {
            "iconId": "webExpend",
            "part": "right",
            "defaultActive": 0,
            "memo": "网页全屏按钮",
            "isrender": 1
          },
          {
            "iconId": "expend",
            "part": "right",
            "defaultActive": 0,
            "memo": "全局全屏按钮",
            "isrender": 1
          }
        ]
      }
    })

//搜索操作
const handleSearch = () => {
  getData()
}

//重置搜索表单
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}

onBeforeUnmount(() => {
  if (UIKitDEMO.value) {
    UIKitDEMO.value.stop()
    UIKitDEMO.value.stopTalk()
  }
});

const rules: FormRules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'change' },
  ],
}



const cancel = () => {
  emit('cancel')
}

const success = () => {

}

const getData = () => {
  if (UIKitDEMO.value) {
    UIKitDEMO.value.stop()
    UIKitDEMO.value.stopTalk()
  }
  getRecordUrl({ id: id, isSmallApp: false, startTime: searchData.date+' 00:00:00', endTime: searchData.date+' 23:59:59' }).then((res: any) => {
    console.log(res, 'resresres')
    // Object.defineProperty(navigator, 'userAgent', {
    //   value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
    //   configurable: true,
    // });
    UIKitDEMO.value = new EZUIKit.EZUIKitPlayer({
          id: `ezuikit-player`,
          url: res.url,
          width: Number(width)-30,
          height: 400,
          audio:0,
          template: "28b22f31251c4628882289c4640ba682",
          // template: "security",
          accessToken: res.accessToken,
          themeData: themeData.value,
          footer: [ "hd", "fullScreen"],
          scale:'contain'
    })
  })
}

const changeDate = () => {
	getData()
}

const clickDate = ()=> {
	dateRef.value.handleOpen()
}

if (id) getData()
</script>

<template>
  <div class="fieldTable">
    <el-form ref="formRef" label-width="100px" label-position="top">
      <el-row :gutter="20" class="form-card-main">
        <el-col :span="24">
          <el-form-item label="历史视频">
            <div id="ezuikit-player"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
	<div style="position: relative;">
		<div @click.native="clickDate"  style="width: 100%; height: 100%; position: absolute;z-index: 10;"></div>
		<el-date-picker readonly ref="dateRef"  @change="changeDate" style="width:100%;" v-model="searchData.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择"/>
	</div>
  </div>
</template>
<style lang="scss">
	.el-popper{
		width:100% !important;
		inset: auto auto 0 0 !important;
		bottom: 0;
	}
	.time-line-item-container{
		width:100% !important;
	}
	.time-line-container{
		height: 90px !important;
	}
	.el-picker-panel{
		width:100% !important;
	}
	.el-picker-panel__content{
		width:unset !important;
	}
</style>
<style lang="scss" scoped>
  .fieldTable{
    background:#fff;
    height:100%;
    padding:16px;
  }
#videoPlayer {
  width: 100%;
  height: 300px;
}
.form-card-main{
	overflow: hidden;
}
:deep(#mobile-rec-wrap){
	    flex: 1;
}
:deep(#date-switch-container-wrap){
	display:none;
}
:deep(.time-line-item-container){
	width:100% !important;
}
:deep(.time-line-container){
	height: 90px !important;
}
:deep(.el-picker-panel__content){
	width:100% !important;
}
:deep(.el-picker-pane){
	width:100% !important;
}

</style>
